import React, {
    useState,
    useEffect,
    useContext,
    useReducer,
} from 'react';

let _initCfg = 0;
const P = {
    init(_initCfg){
        return {count:_initCfg}
    },
    reducer(state,action){
        switch (action.type) {
            case "add":
                return {count:state.count + 1};
            case "remove":
                return {count:state.count - 1};
            case "reset":
                return {count:action.reset};
            case "noresult":
                return {count:'结果错误'};
            default:
                return {count:state.count}
        }
    }
}


const View = (props) =>{

    const [state, dispatch] = useReducer(P.reducer, _initCfg, P.init);
    // setCount = dispatch+P.reducer 他俩合并的一个效果
    // dispatch 发出指令  不承担结果计算 并且对应的action给到reducer
    //
    // reducer 收到对应指令开始执行相应命令（包含提交的一个action）

    const [_count, setCount] = useState(0);
    // setCount
    // 计算并重新赋值
    // 如果结构比较复杂，需要调用一个单独的函数来配合完成
    // const fn = ()=>{}
    // setCount(fn)
    return(
        <div className="m">
            <h3>这是useReducer</h3>
            <br/>这个值是：{state.count}
            <br/><input onClick={()=>dispatch({type:'add'})} type="button" value="++++"/>
            <br/><input onClick={()=>dispatch({type:'remove'})} type="button" value="----"/>
            <br/><input onClick={()=>dispatch({type:'reset',reset:100})} type="button" value="reset"/>
            <br/><input onClick={()=>dispatch({type:'noresult',lang:"无结果 "})} type="button" value="noresult"/>


            <br/>这个新值是：{_count}
            <br/><input onClick={()=>setCount(_count+1)} type="button" value="添加"/>
            <br/><input onClick={()=>setCount(_count-1)} type="button" value="减去"/>
        </div>
    )
}

export default View;
